<template>
    <div>
        <table-slot :columns="columns" :data="data">
            <template slot-scope="{row}" slot="name">
                <span>{{row.name}}</span>
            </template>

            <template slot-scope="{row}" slot="age">
                <span>{{row.age}}</span>
            </template>

            <template slot-scope="{row}" slot="address">
                <span>{{row.address}}</span>
            </template>

            <template slot-scope="{row}" slot="birthday">
                <span>{{row.birthday}}</span>
            </template>
        </table-slot>
    </div>
</template>

<script>
  import TableSlot from '../components/table-slot/table.vue'

  export default {
    components: { TableSlot },
    data() {
      return {
        editName: '', // 第一列输入框
        editAge: '', // 第二列输入框
        editBirthday: '', // 第三列输入框
        editAddress: '', // 第四列输入框
        editIndex: -1, // 当前聚焦的输入框的行数
        columns: [
          {
            title: '姓名',
            slot: 'name'
          },
          {
            title: '年龄',
            slot: 'age'
          },
          {
            title: '出生日期',
            slot: 'birthday'
          },
          {
            title: '地址',
            slot: 'address'
          },
          {
            title: '操作',
            slot: 'action'
          }
        ],
        data: [
          {
            name: '王小明',
            age: 18,
            birthday: '919526400000',
            address: '北京市朝阳区芍药居'
          },
          {
            name: '张小刚',
            age: 25,
            birthday: '696096000000',
            address: '北京市海淀区西二旗'
          },
          {
            name: '李小红',
            age: 30,
            birthday: '563472000000',
            address: '上海市浦东新区世纪大道'
          },
          {
            name: '周小伟',
            age: 26,
            birthday: '687024000000',
            address: '深圳市南山区深南大道'
          }
        ]
      }
    }
  }
</script>
